import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router'
// axios的基础封装
import axios from 'axios'
// 如果项目不同业务模块需要用到不同的接口地址，=axios.create可以创建多次，定义多个变量导出就可以
const httpInstance = axios.create({
  baseURL: "http://pcapi-xiaotuxian-front-devtest.itheima.net",
  timeout: 100000
})
// 拦截器
// axios请求拦截器
httpInstance.interceptors.request.use(config => {
  // 1. 从pinia获取token数据
  const userStore = useUserStore()
  // 2. 按照后端的要求拼接token数据
  const token = userStore.userInfo.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, e => Promise.reject(e))

// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
  // 统一错误提示、
  ElMessage({
    type: 'error',
    message: e.response.data.message
  })
  // 401token处理
  if (e.response.status == 401) {
    // 清除本地用户数据
    const userStore = useUserStore()
    userStore.clearUserInfo()
    // 跳转登录页
    const router = useRouter()
    router.push('/login')

  }

  return Promise.reject(e)
})
export default httpInstance